html,
body {
    width: 100%;
    height: 100%;
}
#mapContainer {
    width: 100%;
    height: 4.7rem;
}

.red-btn {
    margin: auto;
    width: 6rem;
    height: .9rem;
    line-height: .9rem;
    font-size: .36rem;
    text-align: center;
    color: #fff;
    border-radius: 1rem;
    background-image: linear-gradient(to top, #e6281b, #f56853);
}

.details {
    width: 100%;
    padding: .3rem;
    text-align: left;
    .title {
        padding: 0;
        width: 100%;
        line-height: .5rem;
        font-size: .36rem;
        text-align: left;
        color: #000;
        .status{
            margin: 0;
            display: inline-block;
            height: .5rem;
            width: auto;
            line-height: .46rem;
            vertical-align: top;
            &::after {
                margin:auto;
                padding: 4px .12rem;
                display: inline;
                font-size: .24rem;
                color: #fff;
                content: "\6B63\5E38\8425\4E1A";
                border-radius: 4px;
                background-color: #73b34f;
                vertical-align: text-top;
            }
        }

    }
    .address {
        margin: .1rem 0 .2rem;
        width: 100%;
        height: .66rem;
        line-height: .32rem;
        font-size: .24rem;
        color: #9b9b9b;
    }
    .red-btn {
        margin: .3rem auto .6rem;
    }
}

.tips-area {
    margin: 0 0 .9rem;
    padding: .3rem;
    width: 100%;
    height: auto;
    text-align: left;
    background-color: #f5f5f3;
    .tips-title {
        display: inline-block;
        height: .4rem;
        line-height: .4rem;
        font-size: .28rem;
        text-align: left;
        color: #000;
        &::before {
            content: "";
            display: inline-block;
            margin-right: .1rem;
            width: .04rem;
            height: .24rem;
            border-radius: 2px;
            background-color: #e6281b;
            vertical-align: middle;
        }
    }
    p {
        margin: .1rem 0 0;
        font-size: .24rem;
        line-height: .36rem;
        color: #9b9b9b;
    }
}

h1,
h3 {
    margin: 0;
    padding: 0;
    font-family: PingFangSC;
    font-weight: 500;
    text-align: center;
    color: #000;
}

h3 {
    height: .5rem;
    font-size: .36rem;
}

h1 {
    height: .67rem;
    font-size: .48rem;
}

.imgae_block {
    margin: .6rem auto .4rem;
    width: 6.75rem;
    height: 4.46rem;
    background: transparent url('../img/navigation_img.png') center/cover;
}

.fearture {
    margin: 0 auto .6rem;
    width: 6.9rem;
    height: 1.95rem;
    ul {
        padding: 0;
        margin: 0;
        margin-right: -.15rem;
        zoom: 1;
        li {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 2.2rem;
            height: 1.95rem;
            font-size: .28rem;
            margin-right: .15rem;
            float: left;
            text-align: center;
            color: #fff;
            border-radius: .16rem;
            span.big {
                font-size: .56rem;
                font-weight: 500;
                width: 100%;
                display: inline-block;
                line-height: 1.28rem;
            }
        }
        li:first-child {
            background-origin: border-box;
            background-clip: content-box, border-box;
            background-image: linear-gradient(#e6281b, #e6281b), linear-gradient(to bottom, #f71d50, #e11639);
        }
        li:nth-child(2) {
            background-color: #f5a623;
        }
        li:last-child {
            background-color: #4a90e2;
        }
    }
}

.scan-now {
    margin-bottom: .6rem;
    &>span {
        padding-left: .46rem;
        background: transparent url('../img/ss_icon.png') left center/.36rem no-repeat;
    }
}